<template>
    <div class="page">
        <uni-nav-bar fixed statusBar :border="false">
            <div class="navigation-title">积分中心</div>
        </uni-nav-bar>
        <div class="container">
            <div class="bangdan-button" @click="onRankClick">查看榜单</div>
            <div class="main-wrapper">
                <radio-group class="custom-check-group" @change="radioChange">
                    <label :class="tasks[0].checked ? 'custom-check-box active' : 'custom-check-box'">
                        <radio :value="tasks[0].value" :checked="tasks[0].checked" style="display: none;" />
                        {{ tasks[0].text }}
                    </label>
                    <label :class="tasks[1].checked ? 'custom-check-box active' : 'custom-check-box'">
                        <radio :value="tasks[1].value" :checked="tasks[1].checked" style="display: none;" />
                        {{ tasks[1].text }}
                    </label>
                </radio-group>
                <div class="display-wrapper">
                    <div class="my-score">
                        <div class="text">我的积分</div>
                        <div class="score-wrapper">
                            {{ activity202505Store.personalPeakCompetitionInfo?.score || 0 }}
                            <image class="coin-img" mode="scaleToFill"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/qianbi.png">
                            </image>
                        </div>
                    </div>
                    <div class="my-score">
                        <div class="text">今日获得积分</div>
                        <div class="score-wrapper">
                            {{activity202505Store.personalPeakCompetitionInfo?.todayScore || 0}}
                            <image class="coin-img" mode="scaleToFill"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/qianbi.png">
                            </image>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-wrapper">
                <div class="detail">
                    <div class="title">
                        <image class="title-image"
                            src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationLeft.png"
                            mode="scaleToFill" />
                        <text class="title-text">{{ taskTitle }}</text>
                        <image class="title-image"
                            src="https://ustatic.hudongmiao.com/miao/activity/202505/starDecorationRight.png"
                            mode="scaleToFill" />
                    </div>
                    <div class="tips">（系统自动发放）</div>
                    <div v-if="tasks[0].checked" class="hudong-menu">
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon1.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">完成1场有效活动</div>
                                <div class="text2"><text class="number">300</text>积分奖励，大于30人签到，单个账号天最多3场活动，超出无效</div>
                            </div>
                            <div class="button" @click="onCreateClick">去创建</div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon2.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">红包雨游戏</div>
                                <div class="text2">1元流水奖励<text class="number">1</text>积分</div>
                            </div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon3.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">猜红包游戏</div>
                                <div class="text2">1元流水奖励<text class="number">2</text>积分</div>
                            </div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon4.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">争分夺秒游戏</div>
                                <div class="text2">1元流水奖励<text class="number">2</text>积分</div>
                            </div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon5.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">转一转、扭一扭、幸运小转盘游戏</div>
                                <div class="text2">1元流水奖励<text class="number">3</text>积分</div>
                            </div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon6.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">开宝箱、红包墙游戏</div>
                                <div class="text2">1元流水奖励<text class="number">3</text>积分</div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="hudong-menu">
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon7.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">每日签到</div>
                                <div class="text2">增加<text class="number">50</text>积分（每日可签到1次）</div>
                            </div>
                            <div v-if="!activity202505Store.isSignedIn" class="button" @click="onCheckInClick">签到</div>
                            <div v-else class="button-signed">签到</div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon8.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">邀请好友参加本次巅峰赛活动</div>
                                <div class="text2">邀请1位嗨喵好友获得<text class="number">50</text>积分</div>
                            </div>
                            <button class="button" open-type="share">去邀请</button>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon9.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">邀请新用户注册使用</div>
                                <div class="text2">新用户注册后完成一场有效活动，奖励<text class="number">1000</text>积分</div>
                            </div>
                            <div class="button" @click="onInviteNewClick">去邀请</div>
                        </div>
                        <div class="menu-item">
                            <image class="icon-img"
                                src="https://ustatic.hudongmiao.com/miao/activity/202505/scoreIcon10.png"
                                mode="scaleToFill"></image>
                            <div class="desc-wrapper">
                                <div class="text1">分销婚礼娃娃</div>
                                <div class="text2">完成真实有效订单，奖励<text class="number">500</text>积分</div>
                            </div>
                            <div class="button" @click="onFenxiaoClick">去分销</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <ToLoginMask v-if="!isLogin" />
    <SignInSuccess ref="signInSuccess" />
    <CustomTabBar />
</template>

<script setup lang="ts">
import { reqPersonCheckIn } from "@/api/activity-202310-api";
import CustomTabBar from "@/components/CustomTabBar.vue";
import ToLoginMask from "@/components/ToLoginMask.vue";
import SignInSuccess from "@/components/activity-202505/SignInSuccess.vue";
import { useActivity202505 } from "@/stores/activity-202505-store";
import { useUser } from "@/stores/user";
import { navigateTo } from '@/utils/navigate';
const activity202505Store = useActivity202505();
const user = useUser();
const { userInfo, isLogin } = storeToRefs(user);
const signInSuccess = ref<InstanceType<typeof SignInSuccess>>();
const {
  personalPeakCompetitionInfo,
  personInfo202310,
} = storeToRefs(activity202505Store);
const tasks = ref([
    { value: 0, text: '互动任务' ,checked:true},
    { value: 1, text: '激励任务' ,checked:false}
]);
const taskTitle = computed(() => tasks.value.find(item => item.checked)?.text);

const radioChange= (e: any) => {
    const selectedValue = Number(e.detail.value);
    
    // 更新所有选项的选中状态
    tasks.value.forEach(task => {
        task.checked = task.value === selectedValue;
    });
}

const onCreateClick = ()=>{
    uni.navigateToMiniProgram({
      appId: "wxedf32538e9a5f880",
      path: "pages/index/applyActivity/applyActivity",
      envVersion: "release",
    });
}

const onCheckInClick = async ()=>{
  if (!isLogin.value) {
    navigateTo('login');
    return;
  }
  if (activity202505Store.isSignedIn) {
    uni.showToast({ title: '今日已签到' });
    return;
  }

  const res =await reqPersonCheckIn();
  const checkInResData = res?.data as ResponseData<{code: 200|203 }>;
  if (checkInResData?.code === 200) {
    activity202505Store.isSignedIn = true;
    signInSuccess.value?.open()
    await activity202505Store.setIsSignedIn()
    await activity202505Store.setPersonalPeakCompetitionRankList()
    return;
  }

  uni.showToast({ title: checkInResData.msg || '签到失败，请稍后重试' });

}

const onFenxiaoClick = ()=>{
        uni.navigateToMiniProgram({
        appId: "wxedf32538e9a5f880",
        path: "pages/activity/shop/shop",
        envVersion: "release",
      });
}

const onInviteNewClick = ()=>{
    uni.navigateToMiniProgram({
        appId: "wxedf32538e9a5f880",
        path: "pages/inviteTest/inviteTest",
        envVersion: "release",
      });
}

const onRankClick = ()=>{
    navigateTo('rank2025')
}

onShow(async ()=>{
    await activity202505Store.setIsSignedIn()
    await activity202505Store.setPersonalPeakCompetitionRankList()
})

onMounted(()=>{

})


let inviteFriend = () => {
    return ({
      title: `@${personInfo202310.value.nickname}邀请你参加嗨喵五一欢乐赛，赢iPhone16、大疆无人机等豪礼>>`,
      path: `/pages/index?inviteKey=${personInfo202310.value.inviteKey}`,
      imageUrl: 'https://ustatic.hudongmiao.com/%20miao/activity/share-poster.png',
    });
}

onShareAppMessage(inviteFriend);
</script>
<style scoped lang="scss">
.page {

    position: relative;

    width: 750rpx;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #FFC77A;

    @media (min-aspect-ratio: 380/812) {
        min-height: 120vh;
    }
    @media (min-aspect-ratio: 330/568) {
        min-height: 150vh;
    }


    // 隐藏滚动条
    &::-webkit-scrollbar {
        display: none;
    }



    .navigation-title {
        width: 100%;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 12rpx;
        align-items: center;
        font-weight: bold;
    }



    .container {
        position: relative;
        margin-top: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .bangdan-button {
            position: absolute;
            right: 0rpx;
            top: 35rpx;
            width: 142rpx;
            height: 44rpx;
            border-radius: 27rpx 0px 0px 27rpx;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            color: #F8A15B;
        }

        .main-wrapper {
            width: 750rpx;
            display: flex;
            flex-direction: column;
            justify-content: justify-content;
            align-items: center;
            background: linear-gradient(180deg, #FE933C 0%, #FAA838 59%, #FFC77A 100%);

            .custom-check-group {
                width: 380rpx;
                padding-left: 5rpx;
                padding-right: 5rpx;
                height: 71rpx;
                margin-top: 20rpx;
                background-color: #FFFFFF;
                border-radius: 35.5rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                .custom-check-box {
                    width: 180rpx;
                    height: 49rpx;
                    background-color: #fff;
                    font-weight: 500;
                    font-size: 34rpx;
                    color: #FC9F3A;
                    line-height: 49rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                    border-radius: 25rpx 25rpx 25rpx 25rpx;

                    &.active {
                        background-color: #FC9F3A;
                        color: #fff;
                    }
                }
            }

            .display-wrapper {
                width: 700rpx;
                margin-top: 60rpx;
                margin-bottom: 90rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                .my-score {
                    width: 350rpx;
                    height: 105rpx;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    // background-color: rgb(126, 203, 123);

                    .text {
                        height: 37rpx;
                        font-weight: 500;
                        font-size: 34rpx;
                        color: #FFFFFF;
                        line-height: 37rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }

                    .score-wrapper {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 52rpx;
                        font-weight: 700;
                        font-size: 52rpx;
                        color: #FFFFFF;
                        line-height: 52rpx;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;


                        .coin-img {
                            position: absolute;
                            bottom: 0;
                            left: -60rpx;
                            z-index: 2;

                            width: 60rpx;
                            height: 62rpx;
                        }
                    }
                }

                .my-score:nth-child(1) {
                    border-right: 1px solid #fff;
                }
            }

        }

        .detail-wrapper {
            margin-top: 10rpx;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .detail {
                width: 728rpx;
                height: 924rpx;
                background-color: #fff;
                border-radius: 22rpx 22rpx 22rpx 22rpx;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;

                .title {
                    width: 680rpx;
                    height: 36rpx;
                    margin-top: 32rpx;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: flex-start;

                    .title-image {
                        margin-top: 10rpx;
                        width: 233rpx;
                        height: 21rpx;
                    }

                    .title-text {
                        width: 151rpx;
                        height: 37rpx;
                        margin-left: 15rpx;
                        margin-right: 15rpx;
                        font-size: 34rpx;
                        font-weight: bold;
                        line-height: 37rpx;
                        text-align: center;
                        color: #F8A15B;
                    }

                }

                .tips {
                    margin-top: 10rpx;
                    height: 35rpx;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #8D8D8D;
                    line-height: 35rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }

                .hudong-menu {
                    width: 680rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;

                    .menu-item {
                        position: relative;
                        width: 680rpx;
                        height: 90rpx;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-top: 20rpx;
                        margin-bottom: 20rpx;

                        .icon-img {
                            width: 80rpx;
                            height: 80rpx;
                        }

                        .desc-wrapper {
                            margin-left: 25rpx;
                            width: 472rpx;
                            height: 90rpx;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: flex-start;

                            .text1 {
                                width: 472rpx;
                                height: 37rpx;
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #000000;
                                line-height: 37rpx;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;
                            }

                            .text2 {
                                width: 352rpx;
                                font-weight: 400;
                                max-height: 60rpx;
                                font-size: 22rpx;
                                color: #8D8D8D;
                                line-height: 30rpx;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;

                                .number {
                                    color: #F8A15B;
                                    font-weight: 400;
                                    font-size: 22rpx;
                                    line-height: 30rpx;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                }
                            }
                        }

                        .button {
                            position: absolute;
                            right: 50rpx;
                            top: 30rpx;
                            width: 116rpx;
                            height: 44rpx;
                            background: #FAA838;
                            border-radius: 31rpx 31rpx 31rpx 31rpx;
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #FFFFFF;
                            line-height: 44rpx;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;
                        }

                        .button-signed {
                            position: absolute;
                            right: 50rpx;
                            top: 30rpx;
                            width: 116rpx;
                            height: 44rpx;
                            background: #D8D8D8;
                            border-radius: 31rpx 31rpx 31rpx 31rpx;
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #404040;
                            line-height: 44rpx;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;
                        }
                    }
                }
            }
        }

    }






}
</style>